<template>
  <div class="container-big wing-blank invoice-page">
    <co-list class="order-list">
      <co-list-item>
        <span class="order-no-label order-no-label-span">
          订单号
        </span>
        {{formData.orderCode}}
      </co-list-item>
      <co-list-item>
        <span class="order-no-label order-no-label-span">
          发票状态
        </span>
        {{invoiceStatus[formData.status]}}
      </co-list-item>
      <co-list-item v-if="formData.status===0||formData.status==1" class="co-list-item-par ">
        <span class="order-no-label order-no-label-span">
          申请时间
        </span>
        {{$moment(formData.gmtCreate).format( "YYYY.MM.DD HH:mm" )}}
      </co-list-item>
      <co-list-item v-if="formData.status==3" class="co-list-item-par ">
        <span class="order-no-label order-no-label-span">
          发货时间
        </span>
        {{$moment(formData.gmtModified).format("YYYY.MM.DD HH:mm")}}
      </co-list-item>
    </co-list>
    <form name="form" class="invoice-page-form form">
      <fieldset class="form-fieldset">
        <legend class="form-fieldset-legend">
          发票信息
        </legend>
        <div class="form-fieldset-content">
          <div class="form-control">
            <label class="form-control-label">
              发票金额
            </label>
            <input disabled id="companyName" :value="totalPriceTxt" type="text" class="form-control-input">
          </div>
          <div class="form-control">
            <label class="form-control-label">
              发票类型
            </label>
            <input disabled :value="formData.submitType==0?'电子发票(增值税普通发票)':'纸质发票(增值税专用发票)'" type="text" class="form-control-input">
          </div>
          <div class="form-control">
            <label class="form-control-label">
              开具类型
            </label>
            <div class="form-control-radio-group">
              <label>
                <input disabled id="companyName" :value="formData.headerType==1?'企业单位':'个人/非企业单位'" type="text" class="form-control-input">
              </label>
            </div>
          </div>
          <div class="form-control">
            <label class="form-control-label" for="companyName">
              发票抬头
            </label>
            <input :value="formData.headerType == 1?`${formData.headerName}`:'个人'" id="companyName" disabled type="text" placeholder="企业名称" class="form-control-input">
          </div>
          <div class="form-control" v-if="formData.headerType == 1">
            <label class="form-control-label" for="code">
              企业税号
            </label>
            <input id="code" disabled v-model.trim="formData.taxNum" type="text" placeholder="企业纳税人识别号" class="form-control-input">
          </div>
          <div class="form-control" v-if="formData.submitType==1">
            <label class="form-control-label" for="payerBank">
              开户银行
            </label>
            <input id="payerBank" disabled v-model.trim="formData.payerBank" type="text" placeholder="基本开户银行名称" class="form-control-input">
          </div>
          <div class="form-control" v-if="formData.submitType==1">
            <label class="form-control-label" for="payerAccount">
              开户账号
            </label>
            <input id="payerAccount" disabled v-model.trim="formData.payerAccount" type="text" placeholder="基本开户账号" class="form-control-input">
          </div>
          <div class="form-control" v-if="formData.submitType==1">
            <label class="form-control-label" for="payerAddress">
              注场地址
            </label>
            <input id="payerAddress" disabled v-model.trim="formData.payerAddress" type="text" placeholder="注册场所地址" class="form-control-input">
          </div>
          <div class="form-control" v-if="formData.submitType==1">
            <label class="form-control-label" for="payerPhoneNumber">
              固定电话
            </label>
            <input id="payerPhoneNumber" disabled v-model.trim="formData.payerPhoneNumber" type="text" placeholder="注册固定电话" class="form-control-input">
          </div>
          <div class="form-control">
            <label class="form-control-label" for="remark">
              备注内容
            </label>
            <input id="remark" disabled v-model.trim="formData.remark" type="text" placeholder="备注内容" class="form-control-input">
          </div>
        </div>
      </fieldset>

      <fieldset class="form-fieldset">
        <legend class="form-fieldset-legend">
          接收方式
        </legend>
        <div class="form-fieldset-content">
          <template v-if="formData.submitType==0">
            <div class="form-control">
              <label class="form-control-label" for="email">
                接收邮箱
              </label>
              <input id="email" disabled v-model.trim="formData.email" type="text" placeholder="接收邮箱" class="form-control-input">
            </div>
          </template>
          <template v-else>
            <div class="form-control">
              <label class="form-control-label" for="consignee">
                收货人
              </label>
              <input id="consignee" disabled v-model.trim="formData.consignee" type="text" placeholder="收货人姓名" class="form-control-input">
            </div>
            <div class="form-control">
              <label class="form-control-label" for="phoneNumber">
                联系电话
              </label>
              <input id="phoneNumber" disabled v-model.trim="formData.phoneNumber" type="text" placeholder="联系电话" class="form-control-input">
            </div>
            <div class="form-control">
              <label class="form-control-label" for="address">
                收货地址
              </label>
              <input id="address" disabled v-model.trim="formData.address" type="text" placeholder="详细地址" class="form-control-input">
            </div>
          </template>
        </div>
      </fieldset>
    </form>
  </div>
</template>
<script>
import service from "@/api/invoice";
import invoiceStatus from "./invoiceStatus";
export default {
  data() {
    return {
      invoiceStatus: invoiceStatus,
      formData: {}
    };
  },
  computed: {
    totalPriceTxt() {
      return `${this.formData.totalPrice || 0}元`;
    }
  },
  created() {
    this.queryInvoiceByIdForMob();
  },
  methods: {
    async queryInvoiceByIdForMob() {
      const { id } = this.$route.query;
      this.$store.state.loading = true;
      const { data = [] } = await service.queryInvoiceByIdForMob(`id=${id}`);
      this.$store.state.loading = false;
      console.log(data);
      this.formData = data;
      // this.formData = {
      //   activityId: 23,
      //   address: "北京 / 北京市 / 东城区  /  详细地址",
      //   consignee: "测试账号陈南方",
      //   corpId: null,
      //   email: "3119083627@qq.com",
      //   gmtCreate: 1559642019000,
      //   gmtModified: 1559642019000,
      //   headerName: "12121212",
      //   headerType: 1,
      //   id: 14,
      //   invoiceType: 0,
      //   isDel: 0,
      //   orderCode: "4AF88B9V6JDA",
      //   orderId: 43638,
      //   phoneNumber: "15972961091",
      //   remark: "备注",
      //   result: null,
      //   status: 1,
      //   submitType: 1,
      //   taxNum: "12121212121",
      //   totalPrice: 0.6,
      //   uid: null,
      //   userId: "8",
      //   payerBank: "开户银行", //开户银行
      //   payerAccount: "开户账号", //开户账号
      //   payerAddress: "注场地址", //注场地址
      //   companyName: "发票抬头",
      //   headerType: 1, //开具类型
      //   payerPhoneNumber: "固定电话", //固定电话
      //   area: "所在区域", //所在区域
      //   taxNum: "企业税号"
      // };
    }
  }
};
</script>
<style lang="less" scoped>
.invoice-page {
  padding-top: 36px;
  padding-bottom: 180px;
  font-size: 24px;

  .uncan-right {
    z-index: 1;
  }

  .alibaba-design,
  .uncan-2019-text {
    position: static;
  }

  .van-picker__title,
  .van-picker__cancel,
  .van-picker__confirm {
    font-size: 32px;
    color: #4a4a4a;
  }

  .submit-button {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
  }
}

.invoice-page-form {
  margin-top: 68px;
  position: relative;
  z-index: 1;
}

.form-fieldset {
  text-align: left;
  border: none;
  margin-bottom: 18px;
  padding: 0;
}

.form-fieldset-legend {
  display: block;
  color: #fff;
  margin-bottom: 6px;
  font-size: 28px;
}

.form-fieldset-content {
  padding: 6px 26px 36px;
  padding-bottom: 6px;
  background-color: rgba(0, 0, 0, 0.4);
}

.form-control {
  padding: 30px 0;
  font-size: 26px;
  display: flex;
  justify-content: space-between;

  &.arrow {
    background: url(https://img.alicdn.com/tfs/TB1d9jlLzDpK1RjSZFrXXa78VXa-16-28.png)
      no-repeat;
    background-size: 16px 28px;
    background-position: right center;
  }

  & + .form-control {
    border-top: 1px solid rgba(151, 151, 151, 0.2);
  }

  @radio-out-circel-size: 14px;
  @radio-inner-circel-size: 6px;
  @radio-inner-pos: (@radio-out-circel-size - @radio-inner-circel-size) / 2;
  input[type="radio"] {
    width: @radio-out-circel-size; /*no*/
    height: @radio-out-circel-size; /*no*/
    border: 1px solid #fff; /*no*/
    border-radius: 50%;
    margin-right: 10px;
    position: relative;
    transition: 300ms border-color;
    vertical-align: middle;
    top: -2px;

    &:before {
      display: block;
      position: absolute;
      content: " ";
      top: @radio-inner-pos - 1px; /*no*/
      left: @radio-inner-pos - 1px; /*no*/
      height: @radio-inner-circel-size; /*no*/
      width: @radio-inner-circel-size; /*no*/
      border-radius: 50%;
      background-color: transparent;
      transition: 300ms background-color;
    }
  }
}

.form-control-radio-group {
  label + label {
    margin-left: 50px;
  }
}

.form-control-label {
  flex: 0 0 160px;
}

.form-control-input,
.form-control-radio-group {
  flex: 1 1 auto;
}

.form-control-input {
  &:disabled {
    opacity: 0.9;
  }
}

.form-tip {
  color: #737375;
  font-size: 24px;
}

.form-fieldset-tip {
  color: #d8d8d8;
  margin: -10px 0 56px;
  font-size: 20px;
  text-align: left;
}
.co-list-item-par > div {
  margin-top: 0px !important;
}
.order-no-label-span {
  display: inline-block;
  min-width: 116px;
  text-align: left;
  margin-right: 38px;
}
</style>


